<template>
  <view class="login-container">
    <view class="background-animation"></view>
    <form class="login-form" @submit="onSubmit">
      <view class="form-item">
        <text class="form-label">用户名</text>
        <input class="form-input" type="text" placeholder="请输入用户名" v-model="username" />
      </view>
      <view class="form-item">
        <text class="form-label">密码</text>
        <input class="form-input" type="password" placeholder="请输入密码" v-model="password" />
      </view>
      <button @click="login" class="login-button" type="submit">登录</button>
    </form>
  </view>
</template>



<script>
	export default {
		data() {
			return {
				username:null,
				password:null
			}
		},
		methods: {
			login(){
				// let formData = new FormData()
				// formData.append('user_id',+this.username)
				// formData.append('password',this.password)
				uni.request({
					url:'http://localhost:8085/api/employee/login',
					method:'POST',
					data:{username:+this.username,password:this.password},
					// data:formData,
					header : {'content-type':'application/x-www-form-urlencoded'},
					success: function(res){
						let response = res.data 
						if(response.code===200){
							uni.showToast({
								title:'成功',
								duration:2000,
							})
							uni.redirectTo({
								url:'/pages/index/index'
							})
							uni.setStorage({key:'info',data:JSON.stringify(response.data)})
						}else{
							uni.showToast({
							    title: '登陆失败',
							    duration: 2000,
								icon:'error'
							});
						}
					},
					fail:function(res){
						console.log(res)
					}
				})
			}
		}
	}
</script>

<style>
  .login-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  .background-animation {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #0088FF, #00CFFF);
    animation: background 10s ease-in-out infinite;
    z-index: -1;
  }

  .login-form {
	width: 66%;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .form-item {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .form-label {
    font-size: 16px;
    color: #333333;
    margin-bottom: 5px;
  }

  .form-input {
    border: none;
    background-color: #F4F4F4;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    color: #333333;
  }

  .login-button {
    width: 50%;
    border: none;
    background-color: #0088FF;
    border-radius: 5px;
    padding: 10px;
    font-size: 16px;
    color: #FFFFFF;
    cursor: pointer;
  }

  @keyframes background {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
</style>